<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算器</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background: #FF7C87;
			padding-top: 100px;

		}
		.box{
			width: 375px;
			height: 305px;
			background: #9CD1EA;
			margin: 0 auto;
			border-radius: 5px;
			padding-top: 25px;
			padding-left: 25px;

		}
		.box li{
			width: 80px;
			height: 45px;
			background: #FFFFFF;
			list-style: none;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
			text-align: center;
			line-height: 45px;
			font-family: "微软雅黑";
			color: #988F8C;
			border-radius: 5px;
		}
		.box li.clear{
			background: #FF9FA8;
			color: #fff;
		}
		.box li.yunsuan{
			background: #FFF0F5;
		}
		.box li.sum{
			background: #F1FF92;
		}
		.box li.show{
			background: #7AA6BA;
			width: 260px;
			color: #fff;
			text-align: right;
		}


	</style>
</head>
<body>
	<ul class="box">
		<li class="clear">C</li>
		<li class="show">5464564</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li class="yunsuan">+</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li class="yunsuan">-</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li class="yunsuan">/</li>
		<li>0</li>
		<li>.</li>
		<li class="sum">=</li>
		<li class="yunsuan">*</li>
	</ul>
</body>
</html>